<template>
    <div class="rightoperate">

        <ThemeSetting></ThemeSetting>
        <Message></Message>
        <Fullscreen></Fullscreen>
        <span class="username">{{username}}</span>
        <Avator></Avator>
    </div>
</template>

<script setup>
    import Avator from '@/layouts/components/header/components/Avator.vue'
    import Fullscreen from '@/layouts/components/header/components/Fullscreen.vue'
    import Message from '@/layouts/components/header/components/Message.vue'
    import ThemeSetting from "./components/themeSetting.vue"
    import {mainStore} from "@/stores"
import { computed } from '@vue/runtime-core'

    let mStore = mainStore()


    let username = computed(()=>{
        return mStore.userinfo.staffName
    })
</script>

<style lang="scss" scoped>
    .rightoperate{
        display: flex;
        align-items: center;
        .username{
            padding: 0 20px;
        }
    }
</style>